<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="shaerLin">
			<view class="input-view" >
				<view class="input-view-box">
					<uni-icons  type="search" size="22" style="margin:0 20px;" color="#666666" />
					<input placeholder="请输入搜索关键字" v-model="data.keyword"/>
				</view>
			</view>
		</view>
		<view class="header">
<!-- 			<view class="item" v-for="(itme,index) in data.commodity" :key="index" @click="navigationClick(itme.id)">
				<view class="right" style="margin-right: 10upx;" >
					<text :class="itme.id==data.navigation?'activity':''">{{itme.title}}</text>
				</view>
			</view> -->
		</view>
		<view class="content">
			<view class="list">
				<view class="item" v-for="item in data.list">
					<view class="tops">
						<view class="shoplogo">
							<image :src="item.shop_head" mode=""></image>
						</view>
						<view class="shopdetail">
							<view class="topss">
								<view class="shops">
									<view class="shopname textsl1">
										{{item.name}}
									</view>
									<text class="type">
										{{item.shop_class.name?item.shop_class.name:'666'}}
									</text>
								</view>
								<view class="gz"  @click="$goURl('/subPackages/business/businessdetailDown?id='+item.ID)">
									进入店铺
								</view>
							</view>
							<view class="lists">
								<!-- <view class="items">
									<view class="num">
										123
									</view>
									<view class="ms">
										总订单量
									</view>
								</view>
								<view class="items">
									<view class="num">
										123
									</view>
									<view class="ms">
										总订单量
									</view>
								</view>
								<view class="items">
									<view class="num">
										123
									</view>
									<view class="ms">
										总订单量
									</view>
								</view> -->
							</view>
						</view>
					</view>
					<scroll-view :scroll-x="true" class="scroll-view_H" show-scrollbar="false">
						<view class="goodslist" v-if="item.goods.length">
							<view class="goodsitem" v-for="items in item.goods" @click.stop="$goURl('/subPackages/commodity/details?id='+items.ID)">
								<image :src="items.img" mode="aspectFill"></image>
								<view class="price">
									¥ {{$toFiexd(items.price,2)}}
								</view>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>
			<empty v-if="data.list.length==0"></empty>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onReachBottom,onShow,onLoad} from '@dcloudio/uni-app';
	const {proxy} = getCurrentInstance();
	const data =reactive({
		commodity:[
			{title:'综合',id:1},
			{title:'销量',id:2},
			{title:'价格',id:3},
			{title:'筛选',id:4},
		],
		navigation:'1',			//保存导航ID
		page: 0,
		pages: 1,
		size: 20,
		list: [],		//商品
		sort:1,			//商品排序
		switPic:true,		//切换商品布局
		keyword:'',
		shop_class_id:'',//商家类型
	})
	onLoad((option)=>{
		data.keyword=option.keyword?option.keyword:''
		data.shop_class_id=option.id?option.id:''
	})
	onShow(() => {
		// 业务逻辑
		getgoods()
	})

	onReachBottom(() => {
		// 业务逻辑
		console.log('业务逻辑')
	})
	// 点击切换格式
	function switchImg(){
		if(data.switPic == true){
			data.switPic = false
		}else{
			data.switPic = true
		}
	}
	// 点击导航栏
	function navigationClick(id){
		pageList()
		data.navigation = id
		if(id==1){
			data.sort = 0
			getgoods(data.sort)
		}else if(id==2){
			data.sort = 1
			getgoods(data.sort)
		}
	}
	// 排序
	function orderClick(e){
		pageList()
		data.sort = e
		getgoods(data.sort)
	}

	// 获取商品
	function getgoods(sort){
		let sorts = ''
		if(sort){
			sorts = sort
		}else{
			sorts = data.sort
		}
		if(data.page<data.pages){
			data.page++
			let datas=[]
			data.list=datas
			proxy.$request({
				url:`api/businessList/?page=${data.page}&size=${data.size}&shop_class_id=${data.shop_class_id}&keyword=${data.keyword}&code-1`,
				method:'get',
				data:{
					page:data.page,
					size:data.size
				},
				success:(res)=>{
					datas = res.data.data
					data.list = datas
					console.log('list',data.list)
					data.pages = Math.ceil(res.data.total / data.size)
					if (data.pages) {
						if(data.page==data.pages){
							data.loadmore = "nomore"
						}else{
							data.loadmore = "loading"
						}
					}else{
						data.loadmore = "nomore"
					}
				}
			})

		}

	}
	function pageList(){
		data.page = 0
		data.pages = 1
	}
</script>

<style lang="scss" scoped>
	$nav-height: 30px;
	$paddings:10px;
	.container{
		width: 100%;
		// background-color: #fff;
		.shaerLin{
			background-color: #fff;
			display: flex;
			align-items: center;
			.input-view {
				width: 85%;
				background-color: rgb(246, 249, 255);
				height: $nav-height;
				border-radius: 30px;
				padding: 8upx 0;
				padding-right: 0;
				line-height: $nav-height;
				overflow: hidden;
				margin-left: 20px;
				.input-view-box {
					display: flex;
					input {
						height: $nav-height;
						line-height: $nav-height;
						/* #ifdef APP-PLUS-NVUE */
						width: 370rpx;
						/* #endif */
						// padding: 0 20px;
						font-size: 16px;
						color: #9f9f9f;
					}
				}
			}
			.switch{
				width: 15%;
				text-align: center;
				image{
					width: 19px;
					height: 19px;
				}
			}
		}

		.header{
			padding: 30upx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			.item{
				display: flex;
				.right{
					font-weight: 700;
					font-size: 16px;
				}
				.left{
					display: flex;
					flex-direction: column;
					margin-right: 10upx;
					align-items: center;
				}
			}
		}
		.content{
			width: 100%;
			.list{
				padding: 30upx;
				.item{
					padding: 30upx;
					background: linear-gradient(to bottom,#FEEDF5,#fff,#fff,#fff);
					border-radius: 30upx;
					margin-bottom: 30upx;
					color: #333;
					.tops{
						display: flex;
						.shoplogo{
							width: 84upx;
							height: 84upx;
							margin-right: 20upx;
							image{
								width: 84upx;
								height: 84upx;
								border-radius: 50%;
							}
						}
						.shopdetail{
							width: calc(100% - 48upx);

							.topss{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.shops{
									// display: flex;
									// flex-direction: column;
									// justify-content: space-between;
									.shopname{
										color: #333;
										font-weight: bold;
										font-size: 32upx;
										margin-bottom: 20upx;
									}
									.type{
										width: auto;
										color: #FF4E00;
										border: #FF4E00 1upx solid;
										padding: 2upx 20upx;
										font-size: 24upx;
										border-radius: 10upx;
									}
								}
								.gz{
									min-width: 120upx;
									color: #FF1542;
									padding: 10upx 20upx;
									font-size: 24upx;
									background: rgba(255,21,66,0.07);
									border-radius: 13px;
								}
							}
							.lists{
								display: flex;
								margin-bottom: 20upx;
								.items{
									padding: 20upx 0;
									width: 30%;
									.num{
										color:#333;
										font-size: 32upx;
										font-weight: bold;
										margin-bottom: 10upx;
									}
									.ms{
										color:#ccc;
										font-size: 20upx;
									}
								}
							}
						}
					}
					.goodslist{

						border-top: 1upx solid #eee;
						padding-top: 20upx;
						display: flex;
						.goodsitem{
							margin-right: 20upx;
							image{
								width: 160upx;
								height: 160upx;
								border-radius: 30upx;
							}
							.price{
								color: #FF4E00;
								font-size: 24upx;
							}
						}
					}
				}
			}


		}
	}
	::v-deep .uni-icons{
		font-weight: 700;
	}
	.activity{
		color: $color1;
	}
	.tops{
		color: red !important;
	}
</style>
